<template>
	<view class="login flex-col flex-al">
		<view class="b-t w100">验证码登陆/注册</view>
		<view class="pphonebox flex-row flex-al w100">
			<text class="iconfont icon-shoujihao"></text>
			<text> 手机号</text>
		</view>
		<view class="f-box w100">
			<view class="w100 flex-row flex-al f-item">
				<view class="ptip">+86</view>
				<view class="shu"></view>
				<input type="number" value="" placeholder="请输入手机号" maxlength="11" @input="inputNum" focus/>
			</view>
			<view class="w100 flex-row flex-al f-item">
				<view :class="!isNum?'fs-false':'fs'" @click="getCode">发送</view>
				<view class="shu"></view>
				<input type="number" value="" placeholder="请输入验证码" maxlength="6" @input="inputCode" />
			</view>
		</view>
<!-- 		<image class="logo" src="/static/imgs/logo.png" mode=""></image>
		<button  :class="true?'b-botton flex-al flex-col flex-jc w100 b-botton-active':'b-botton flex-al flex-col flex-jc w100'" open-type="getUserInfo" @getuserinfo="login" >
			登陆
		</button> -->
			<view  :class="isNum?'b-botton flex-al flex-col flex-jc  b-botton-active':'b-botton flex-al flex-col flex-jc '"  @click="login2" >
					登陆
			</view>
		

	</view>
</template>
<script>
	import HttpModule from "../../module/httpModule.js"
	const httpModule=new HttpModule()
	export default {
		data() {
			return {
				code: null,
				num: null,
				isNum:false,
				isActive:false,
				timeOut:60,
				isSend:false
			}
		},
		async onShow(){
			// const token=(await httpModule.chackToken()).data;
			// if(token){
			// 	console.log(token)
			// 	uni.switchTab({
			// 		url:'/pages/realRime/index/index'
			// 	})
			// }
			// if(!token){
			// 	uni.showLoading({
			// 		title:'加载中'
			// 	});
			// 	const code=await new Promise((resolve)=>{
			// 			wx.login({
			// 				success:res=>{
			// 					const code=res.code;
			// 					resolve(code)
			// 				}
			// 			})
			// 	})
			// 	const token=(await httpModule.loginByMiniCode(code));
			// 	uni.hideLoading()
			// 	console.log(token)
			// 	uni.switchTab({
			// 		url:'/pages/realRime/index/index'
			// 	})
				
			// }
		},
		methods: {
		    async getCode(){
				 if(true){
					const _this=this;
					_this.isSend=true;
					const data= await httpModule.newCode(_this.num );
					console.log(data)
					_this.timeOut=60
					// var timeGo=setInterval(()=>{
					// 	_this.timeOut=Math.max(_this.timeOut-1,0)
					// 	if(_this.timeOut==0){
					// 		_this.isSend=false;
					// 		clearInterval(timeGo)
					// 	}
					// },1000)
				 }
			},
			async login(e){
				const value =e.detail.rawData
				console.log(value)
				// const token=(await httpModule.chackToken()).data;
				// if(token){
				// 	console.log(token)
				// 	uni.switchTab({
				// 		url:'/pages/realRime/index/index'
				// 	})
				// }
				if(value){
					uni.showLoading({
							title:'加载中'
					});
						const code=await new Promise((resolve)=>{
								wx.login({
									success:res=>{
										const code=res.code;
										resolve(code)
									}
								})
						});
						let data={
							code,
							value
						}
						const token=(await httpModule.loginByMiniCode(data));
						uni.hideLoading()
						console.log(token)
						if(token){
							uni.switchTab({
								url:'/pages/realRime/index/index'
							})
						}
						// uni.switchTab({
						// 	url:'/pages/realRime/index/index'
						// })
				}else{
					wx.showToast({
						title:'你取消了',
						icon:'none'
					})
				}
				
					
			
				// if(this.isActive){
				// 	const phone=this.num;
				// 	const code=this.code;
				// 	// uni.showLoading({
				// 	// 	title:'登陆中'
				// 	// })
				// 	const token=await httpModule.loginByPhone(phone,code);//自动设置了token
				// 	uni.switchTab({
				// 		url:'/pages/realRime/index/index'
				// 	})
				// }
				
			},
			async login2(){
				if(this.isActive){
					const phone=this.num;
					const code=this.code;
					// uni.showLoading({
					// 	title:'登陆中'
					// })
					const token=await httpModule.loginByPhone(phone,code);//自动设置了token
					uni.switchTab({
						url:'/pages/realRime/index/index'
					})
				}
				
				
			},
			inputNum(e) {
				const num = e.detail.value;
				this.num = num;
				this.chackNum()
				this.chackInput()

			},
			inputCode(e) {
				const code = e.detail.value;
				this.code = code;
				this.chackInput()
			},
			chackInput() {
				if (this.num.length==11 && this.code.length==6) {
					this.isActive = true
				} else {
					this.isActive = false
				};
			},
			chackNum() {
				if (this.num.length==11) {
					this.isNum = true
				} else {
					this.isNum = false
				};
			}
		}
	}
</script>

<style scoped lang="less">



	.login {
		width: 750rpx;
		padding: 50rpx;
		min-height: 100vh;
		// background:linear-gradient(180deg,rgba(20,133,153,1) 0%,rgba(20,160,77,1) 100%)!important;
		box-sizing: border-box;

		.b-t {
			margin-top: 50rpx;
			font-size: 40rpx;
			font-weight: bold;
			color: rgba(0, 0, 0, 1);
		}

		.pphonebox {
			margin-top: 40rpx;
			font-size: 27rpx;
			color: rgba(0, 0, 0, 1);

			.iconfont {
				margin-right: 5rpx;
			}
		}

		.f-box {
			.f-item {
				border-bottom: 1rpx solid #f1f1f1;
				box-sizing: border-box;
				padding: 22rpx 0;
				font-size: 32rpx;

				.shu {
					width: 1px;
					height: 37rpx;
					background: #979797;
					margin: 0 33rpx;
					margin-left: 0;
				}

				&:first-child {
					margin-top: 40rpx;
				}

				&:last-child {
					margin-top: 20rpx;
				}

				.ptip {
					color: #D5790B;
					width: 90rpx;
				}

				.fs {
					color: #1AB894;
					width: 90rpx;
				}
				.fs-false {
					color: #a0a0a0;
					width: 90rpx;
				}

			}
		}

		.b-botton {
			width:628rpx;
			height:94rpx;
			background:rgba(0,0,0,.05);
			border-radius:10rpx!important;
			position: absolute;
			bottom: 100rpx;
			font-size: 32rpx;
			color: rgba(152, 152, 152, 1);
		}

		.b-botton-active {
			width:628rpx;
			height:94rpx;
			background:#1AB894;
			position: absolute;
			bottom: 100rpx;
			font-size: 32rpx;
			color: #fff!important;
			font-size:30rpx;
			border-radius:10rpx!important;
			font-family:PingFangSC-Regular,PingFang SC;
			color:rgba(44,146,74,1);
		}

	}
	.logo{
		width: 326rpx;
		height: 340rpx;
		margin-top: 20vh;
	}
</style>
